<template>
    <div class="ipt">
        <div id="divtop">
            编号:<input type="text" v-model="code">
            品牌名称:<input type="text" v-model="title">
            <br>
            产品图片地址:<input type="text" v-model="imgs">
            价格:<input type="text" v-model="price">
            <button @click="add">添加</button>
        </div>
        <div id="divcenter">
            品牌名称:<input type="text" v-model="keyword" placeholder="请输入搜索条件">
        </div>
    </div>
</template>
<script>
    export default {
        props:{
            oldGoodsList:{
                type: Array,
            }
        },
        data(){
            return{
                code:"",
                title:"",
                imgs:"",
                price:"",
                keyword:"",  // 搜索关键字
            }
        },
        watch:{
            keyword(newVal){
                // 去oldGoodsList里面搜索，搜索到结果之后，重新给goodsList赋值
                console.log(newVal);
                console.log(this.oldGoodsList);

                // 根据newVal用户输入的搜索关键字去oldGoodsList中的每个对象中title这个字段中进行indexOf搜索，结合filter，返回搜索结果不等于-1的选项
                let result = this.oldGoodsList.filter(item=>item.title.indexOf(newVal) !== -1);
                // 将搜索的结果传递给父组件
                this.$emit('search',result)
            }
        },
        methods:{
            add(){
                if(!this.code || !this.title || !this.imgs || !this.price){
                    return;
                }
                // 声明一个对象，添加到goodsList这个数组中
                let obj = {
                    id:Math.random().toString(32).substring(2),
                    code:this.code,
                    imgs:this.imgs,
                    title:this.title,
                    price:this.price,
                    count:1
                }
                // 传给父组件
                this.$emit('add',obj)
            }
        }
    }
</script>